<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view class="margin-top-xs">
			<view class="btn">
				<view style="flex: 1;">
					<a class="om-btn fr" @click="sortGroup">新建分组排序</a>
					<a class="om-btn fr" @click="addGroup">新建分组</a>
				</view>
			</view>
			<view class="page__bd" style="margin-top: 52px;">
				<uni-list>
					<uni-list-item v-for="(item,index) in groupList" @click="groupLink(item)">
						<view>{{ item.groupName }}</view>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<uni-popup  id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="margin popup-tip">
					新建分组
				</view>
				<view class="popup-item padding">
					<input type="text" class="txt" v-model="groupName" placeholder="请输入分组名称(＜10个字)" @input="handleInput" maxlength="9"/>
				</view>
				<view class="margin flex justify-end">
					<a class="cancel-btn om-btn" @click="save">确定</a>
					<a class="cancel-btn om-cancel-btn" @click="cancel">取消</a>
				</view>
			</view>
		</uni-popup>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '菜单分组',
				groupList: [],
				groupName: '',
			};
		},
		methods: {
			sortGroup(){
				uni.navigateTo({
					url: "/pages/main/group/group-sort"
				});
			},
			groupLink(item){
				uni.navigateTo({
					url: "/pages/main/group/group?groupId="+item.id
				});
			},
			addGroup(){
				this.$refs.popup.open()
				this.groupName = ''
				// uni.navigateTo({
				// 	url: "/pages/main/group/add-group"
				// });
			},
			// getGroupList(){
			// 	let _that = this
			// 	_that.om.request('wxNewGroupMenu/getAllGroupList',{
			// 		groupStatus: true
			// 	}).then(res => {
			// 		if (res.succeed) {
			// 			_that.groupList = res.value;
			// 		}
			// 	});
			// },
			getGroupList(groupName){
				let _that = this
				_that.om.request('wxNewGroupMenu/getAllGroupList').then(res => {
					if (res.succeed) {
						_that.groupList = res.value;
						
						for(let i=0; i<_that.groupList.length; i++){
							if(_that.groupList[i].groupName == groupName){
								_that.om.request('wxNewGroupMenu/editGroupStatus', {
									groupId: _that.groupList[i].id,
									groupStatus: true
								},'post').then(res => {
									if (res.succeed) {
										
									}else{
										_that.om.toast(res.msg);
									}
								});
							}
						}
					}
				});
			},
			save(){
				let _that = this
				_that.om.request('wxNewGroupMenu/renameGroup', {
					groupId: '',
					groupName: _that.groupName
				}, 'post').then(res => {
					if (res.succeed) {
						_that.getGroupList(_that.groupName)
						_that.$refs.popup.close()
					}else{
						_that.om.toast(res.msg);
					}
				});
			},
			cancel(){
				this.$refs.popup.close()
			},
			handleInput(event){
				var val = event.target.value;
				val = val.replace(/#/g, '').substring(0, 10);
				this.groupName = val;
			},
		},
		onLoad() {
			
		},
		onShow(){
			this.getGroupList()
		}
	};
</script>

<style lang="scss" scoped>
	.btn{
		position: fixed;
		top: 0;
		display: flex;
		z-index: 99;
		width: 100%;
		padding: 5px 3px;
		border-bottom: 1px solid #c8c7cc;
		background: #FFF;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-item .txt{
		text-align: left;
		width: 100%;
	}
	.popup-tip{
		font-size: 16px;
		// color:#b0b0b0;
		color:#000;
	}
	.cancel-btn{
		margin: 15px auto 0;
	}
</style>
